import { qrCodeModel } from '@/models/qrCode'
import { CustomTag } from '@/pages/TagManage'
import { gerQrCodePage } from '@/services/qrCodeService'
import {
  ModalForm,
  PageContainer,
  ProColumns,
  ProFormDateTimePicker,
  ProFormDependency,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProTable,
} from '@ant-design/pro-components'
import { ActionType } from '@ant-design/pro-table'
import { Button, Space } from 'antd'
import { observer } from 'mobx-react-lite'
import { useRef } from 'react'
import { QrCodeUpdateBO, QrCodeVO } from '../../../types/qrCode'

const QrCodeManage = () => {
  let qrTypeEnum = {
    wx_miniapp: '小程序二维码',
    wx_mp: '公众号二维码',
    wx_mp_temp: '公众号临时二维码',
  }
  const columns: ProColumns<QrCodeVO>[] = [
    { dataIndex: 'id', title: 'id', hideInTable: true },
    { dataIndex: 'appName', title: '平台名', width: 200 },
    {
      dataIndex: 'appType',
      title: '平台类型',
      valueEnum: {
        wx_miniapp: '微信小程序',
        wx_mp: '微信公众号',
      },
      width: 200,
    },
    { dataIndex: 'describe', title: '二维码描述', width: 200 },
    {
      dataIndex: 'type',
      title: '类型',
      width: 150,
      valueType: 'select',
      valueEnum: qrTypeEnum,
    },
    { dataIndex: 'qrUrl', title: '二维码', valueType: 'image', width: 80 },
    {
      dataIndex: 'tags',
      title: '标签',
      width: 700,
      render: (dom, entity) =>
        entity.autoBindTags.map((tag) => (
          <Space direction={'horizontal'} key={tag.id}>
            <CustomTag key={tag.id} color={tag.tagBgColor} tagTextColor={tag.tagTextColor}>
              {tag.tagName}
            </CustomTag>
          </Space>
        )),
    },
    { dataIndex: 'expireTime', title: '过期时间', valueType: 'dateTime', width: 180 },
    { dataIndex: 'createTime', title: '创建时间', valueType: 'dateTime', width: 180 },
    {
      title: '操作',
      fixed: 'right',
      width: 120,
      render: (dom, entity, index, action) => (
        <Space>
          <a onClick={() => qrCodeModel.edit(entity)}>修改</a>
          <a href="#">删除</a>
        </Space>
      ),
    },
  ]

  const formActionRef = useRef<ActionType>()

  const handleOnFinish = async (bo: QrCodeUpdateBO) => {
    let res = await qrCodeModel.save(bo)
    if (res === undefined) {
      return false
    }
    formActionRef.current?.reload()
    return true
  }
  return (
    <PageContainer>
      <ProTable<QrCodeVO>
        actionRef={formActionRef}
        request={gerQrCodePage}
        columns={columns}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['20', '50', '100'],
        }}
        scroll={{ x: 500 }}
        sticky={{ offsetHeader: 55, offsetScroll: 5 }}
        toolbar={{
          actions: [
            <Button key="create" onClick={qrCodeModel.createQr}>
              创建二维码
            </Button>,
          ],
        }}
      />

      <ModalForm<QrCodeUpdateBO>
        key={qrCodeModel.currentQrCode?.id}
        open={qrCodeModel.updateModalState}
        initialValues={qrCodeModel.currentQrCode}
        onOpenChange={qrCodeModel.setUpdateModalState}
        onFinish={handleOnFinish}
      >
        {qrCodeModel.isUpdate && <ProFormText disabled name="id" />}
        <ProFormText label="二维码名称" name="describe" />
        <ProFormSelect disabled={qrCodeModel.isUpdate} label="平台" name="appId" options={qrCodeModel.mpListEnum} />
        <ProFormDependency name={['appId']}>
          {({ appId }) => {
            let mpInfo = qrCodeModel.getMpInfo(appId)
            if (!mpInfo) return <></>

            if (mpInfo.type === 'wx_mp') {
              return <ProFormSwitch label="是否永久二维码" name="isLast" />
            }

            if (mpInfo.type === 'wx_miniapp') {
              return <ProFormText label="小程序页面" />
            }
          }}
        </ProFormDependency>
        <ProFormSelect
          label="二维码标签"
          name="bindTagIds"
          mode={'multiple'}
          options={qrCodeModel.socialUserTagListEnum}
        />
        <ProFormSelect label="消息包" name="messagePocketId" options={qrCodeModel.socialUserTagListEnum} />
        <ProFormDependency name={['isLast', 'appId']}>
          {({ isLast, appId }) => {
            let mpInfo = qrCodeModel.getMpInfo(appId)
            if (!mpInfo) return <></>
            if (mpInfo.type === 'wx_miniapp') {
              return <ProFormDateTimePicker disabled={qrCodeModel.isUpdate} label="过期时间" name="expireTime" />
            }
            return (
              <ProFormDateTimePicker disabled={qrCodeModel.isUpdate || isLast} label="过期时间" name="expireTime" />
            )
          }}
        </ProFormDependency>
      </ModalForm>
    </PageContainer>
  )
}

export default observer(QrCodeManage)
